<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>修改界面</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"
	media="all">
<link href="css/style1.css" rel="stylesheet" type="text/css" media="all" />
<link
	href="http://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800,900"
	rel="stylesheet">
<style type="text/css">
.userImage {
  border-radius: 50%; 
  overflow: hidden; 
  width: 120px; 
  height: 120px; 
  margin: 10px auto 30px;
  border: 1px solid black;
}
</style>
<script src='js/jquery-3.2.1.js'></script>
<script type="text/javascript">
	/* 文件上传失败服务器响应回来的提示 */
	var fileupload_error = "${param.fileupload_error}"
	if (fileupload_error != "") {
		alert("文件上传失败：文件大小不能超过12M,没有上传图片");
	}
	/* 仅仅是预览图片效果 */
	function changepic() {
		// 构造一个文件渲染对象
		var reads = new FileReader();
		// 得到文件列表数组
		var f = document.getElementById('file').files[0];
		// FileReader.readAsDataURL读取指定Blob或File的内容
		reads.readAsDataURL(f);
		// 拿到文件数据
		reads.onload = function(e) {
			// 显示图片
			document.getElementById('img3').src = this.result;
			$("#img3").css("display", "block");
		};
	}
	var httpRequest = null;
	function checkName(oval){
	if (oval == "") {
			return;
		}
		try {
			
			httpRequest = new ActiveXObject("Msxml2.XMLHTTP");

		} catch (e) {
			try {
				
				httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {
				try {
					
					httpRequest = new XMLHttpRequest();
					if (httpRequest.overrideMimeType) {
						httpRequest.overrideMimeType("text/xml");
					}
				} catch (e) {

				}
			}

		}

		if (httpRequest == null) {
			alert("浏览器不支持XMLHttpRequest");
			return;
		}
	
		httpRequest.open("post", "NameCheckServlet", true);
		
		httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		
		httpRequest.onreadystatechange = nameback;

		httpRequest.send("uname=" + oval);
}
	
	
	function nameback(){
	   if(httpRequest.readyState==4 && httpRequest.status==200){
	     document.getElementById("namespan").innerHTML=httpRequest.responseText;
	   }
	}
	function checkEmail(oval){
	if (oval == "") {
			return;
		}
		try {
			
			httpRequest = new ActiveXObject("Msxml2.XMLHTTP");

		} catch (e) {
			try {
				
				httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {
				try {
					
					httpRequest = new XMLHttpRequest();
					if (httpRequest.overrideMimeType) {
						httpRequest.overrideMimeType("text/xml");
					}
				} catch (e) {

				}
			}

		}

		if (httpRequest == null) {
			alert("浏览器不支持XMLHttpRequest");
			return;
		}
	
		httpRequest.open("post", "EmailCheckServlet", true);
		
		httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		
		httpRequest.onreadystatechange = emailback;

		httpRequest.send("uemail=" + oval);
	}
	function emailback(){
	  if(httpRequest.readyState==4 && httpRequest.status==200){
	     document.getElementById("emailspan").innerHTML=httpRequest.responseText;
	    }
	}
	function checkPhone(oval){
	if (oval == "") {
			return;
		}
		try {
			
			httpRequest = new ActiveXObject("Msxml2.XMLHTTP");

		} catch (e) {
			try {
				
				httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {
				try {
					
					httpRequest = new XMLHttpRequest();
					if (httpRequest.overrideMimeType) {
						httpRequest.overrideMimeType("text/xml");
					}
				} catch (e) {

				}
			}

		}

		if (httpRequest == null) {
			alert("浏览器不支持XMLHttpRequest");
			return;
		}
	
		httpRequest.open("post", "PhoneCheckServlet", true);
		
		httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		
		httpRequest.onreadystatechange = phoneback;

		httpRequest.send("uphone=" + oval);
	}
	function phoneback(){
	  if(httpRequest.readyState==4 && httpRequest.status==200){
	     document.getElementById("phonespan").innerHTML=httpRequest.responseText;
	   }
	}
</script>
</head>

<body>
	<div class="signupform">
	<h1>修改个人信息</h1>
	<div class="container">
		
		<div class="agile_info">
			<div class="w3l_form">
				<div class="left_grid_info">
					<h3>Welcome !</h3>
					<h4>Lorem ipsum dolor sit amet, nulla consectetur adipiscing elit Sed.</h4>
					<p> Nam eleifend velit eget dolor vestibulum ornare. Vestibulum est nulla, fermentum eget euismod et, tincidunt at dui. Nulla tellus nisl, semper id justo vel, rutrum finibus risus. Cras vel auctor odio.</p>
					<ul class="social_section_1info">
						<li><a href="#" class="w3_facebook"><i class="fa fa-facebook"></i></a></li>
						<li><a href="#" class="w3_twitter"><i class="fa fa-twitter"></i></a></li>
						<li><a href="#" class="w3_instagram"><i class="fa fa-instagram"></i></a></li>
						<li><a href="#" class="w3_google"><i class="fa fa-google-plus"></i></a></li>
						<li><a href="#" class="w3_pinterest"><i class="fa fa-pinterest"></i></a></li>
						<li><a href="#" class="w3_vimeo"><i class="fa fa-vimeo"></i></a></li>
					</ul>
				</div>
			</div>
			<div class="w3_info">
			
			<div class="userImage"><img  src="ImgShowServlet?fileName=${user.userProfilePhoto }" id="img3"></div>
				
						<form action="UpdateServlet" method="post" enctype="multipart/form-data">
						<input type="hidden" name="uid" value="${user.userId }" />					
						<div class="input-group" style="height:45px;line-height:45px">
							<span>&nbsp;头像&nbsp;<i class="fa fa-user"
								aria-hidden="true"></i></span> <input type="file" placeholder="头像"
								required="" name="uphoto" style="border: 0px"
								accept="image/jpg,image/jpeg,image/png,image/gif"
								onchange="changepic()" id="file" >						
						</div>						
						<div class="input-group">
							<span><i class="fa fa-user" aria-hidden="true"></i></span>
							<input type="text" placeholder="用户名" required="" name="uname" value="${user.userName }" onblur="checkName(this.value)"/> 
							<span id="namespan"></span>
						</div>
						<div class="input-group">
							<span><i class="fa fa-lock" aria-hidden="true"></i></span>
							<input type="Password" placeholder="密码" required="" name="upwd" value="${user.userPassword }">
						</div>
						<div class="input-group">
							<span><i class="fa fa-envelope" aria-hidden="true"></i></span>
							<input type="email" placeholder="电子邮箱" required="" name="uemail" value="${user.userEmail}" onblur="checkEmail(this.value)"/> 
							<span id="emailspan"></span>
						</div>
					    <div class="input-group" style="height:45px">
	                         <span>&nbsp;生日&nbsp;<i class="fa fa-user" aria-hidden="true"></i></span>
	                         <input type="date" placeholder="生日" required="" name="ubirthday" value="${user.userBirthday }" style="height:45px;border: 0px">
	                    </div>
						<div class="input-group">
							<span><i class="fa fa-user" aria-hidden="true"></i></span>
							<input type="text" placeholder="年龄" required="" name="uage" value="${user.userAge }"> 
						</div>
						<div class="input-group">
							<span><i class="fa fa-user" aria-hidden="true"></i></span>
							<input type="text" placeholder="手机号" required="" name="uphone" value="${user.userTelephoneNumber }" onblur="checkPhone(this.value)"/> 
							<span id="phonespan"></span>
						</div>
						<div class="input-group">
							<span><i class="fa fa-user" aria-hidden="true"></i></span>
							<input type="text" placeholder="昵称" required="" name="unicknamae" value="${user.userNickname }"> 
						</div>
					    				<div class="input-group">
							<span><i class="fa fa-user" aria-hidden="true"></i></span> <input
								type="text" placeholder="验证码" required="" name="uyanzheng">

						</div>
						<p>
							<img src="image.jsp" onclick="src='image.jsp?'+Math.random()"
								style="height:35px;width:80px">
						</p>
							<input type="checkbox" value="remember-me" /> 
							<h4>Send me latest updates </h4>        
							<button class="btn btn-danger btn-block" type="submit">修改</button >                
					</form>
			</div>
			<div class="clear"></div>
			</div>
			
		</div>
		<div class="footer">

 <p>Copyright &copy; 2018.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
 </div>
	</div>
	<style>
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>
<div class="copyrights" id="links20210126">
	Collect from <a href="http://www.cssmoban.com/"  title="网站模板">模板之家</a>
	<a href="http://cooco.net.cn/" title="组卷网">组卷网</a>
</div>
  </body>
</html>
